import {observable, computed, action, autorun} from 'mobx'
import {observer} from "mobx-react";
import React, {Component} from 'react';


class ObservableObj {
    @observable user = {
        firstName: 'yang',
        lastName: 'awesome',
    }
    @computed get fullName(){
        return `${this.user.firstName} ${this.user.lastName}`
    }
    @action setFirstName(name){
        this.user.firstName = name
    }
}

const observableObj = new ObservableObj()

// autorun会监听回调函数中所引用的observable对象，一旦对象更新，就触发运行一次
autorun(() => console.log(observableObj.user.firstName + '1111'));
autorun(() => console.log(observableObj.fullName + '2222'));
@observer class tmp extends Component {
    componentDidMount() {
        setTimeout(() => {
            observableObj.setFirstName('zhao')
        }, 2000)
        setTimeout(() => {
            // 不推荐，尽量不要把逻辑写在组件中，保持组件的可读性和简洁性，逻辑集中写在action中，
            observableObj.user.lastName = 'super'
    }, 3000)
    }

    render(){
        return (
            <div>
                <p>{observableObj.user.firstName}</p>
                <p>{observableObj.user.lastName}</p>
                <p>{observableObj.fullName}</p>
            </div>
        )
    }
}

export default tmp